import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { PostData } from '../../types/post';

interface PostCardProps {
  post: PostData;
  onLike: (postId: number) => void;
  onComment: (postId: number) => void;
  onFavorite: (postId: number) => void;
  onShare: (postId: number) => void;
  onUserPress: (userId: number) => void;
  onPostPress?: (postId: number) => void;
}

/**
 * 帖子卡片组件 - 展示单个帖子的完整信息
 * 包含用户信息、标签、内容、图片和交互功能
 */
const PostCard: React.FC<PostCardProps> = ({
  post,
  onLike,
  onComment,
  onFavorite,
  onShare,
  onUserPress,
  onPostPress,
}) => {
  // 格式化时间显示
  const formatTime = (timeStr: string) => {
    const now = new Date();
    const postTime = new Date(timeStr);
    const diffInHours = Math.floor((now.getTime() - postTime.getTime()) / (1000 * 60 * 60));
    
    if (diffInHours < 1) return '刚刚';
    if (diffInHours < 24) return `${diffInHours}小时前`;
    if (diffInHours < 24 * 7) return `${Math.floor(diffInHours / 24)}天前`;
    return postTime.toLocaleDateString('zh-CN');
  };

  // 渲染标签列表
  const renderTags = () => (
    <View className="flex-row flex-wrap mb-3">
      {post.tags.map((tag, index) => (
        <View key={index} className="bg-blue-100 px-2 py-1 rounded-full mr-2 mb-1">
          <Text className="text-blue-600 text-xs font-medium">{tag}</Text>
        </View>
      ))}
    </View>
  );

  // 渲染图片网格
  const renderImages = () => {
    if (!post.images || post.images.length === 0) return null;

    const imageCount = post.images.length;
    
    if (imageCount === 1) {
      return (
        <View className="mb-3">
          <Image
            source={{ uri: post.images[0] }}
            className="w-full h-48 rounded-lg"
            resizeMode="cover"
          />
        </View>
      );
    }

    if (imageCount === 2) {
      return (
        <View className="flex-row gap-2 mb-3">
          {post.images.map((image, index) => (
            <Image
              key={index}
              source={{ uri: image }}
              className="flex-1 h-32 rounded-lg"
              resizeMode="cover"
            />
          ))}
        </View>
      );
    }

    // 3张或更多图片使用网格布局
    return (
      <View className="mb-3">
        <View className="flex-row gap-2 mb-2">
          {post.images.slice(0, 2).map((image, index) => (
            <Image
              key={index}
              source={{ uri: image }}
              className="flex-1 h-24 rounded-lg"
              resizeMode="cover"
            />
          ))}
        </View>
        {imageCount > 2 && (
          <View className="flex-row gap-2">
            <Image
              source={{ uri: post.images[2] }}
              className="flex-1 h-24 rounded-lg"
              resizeMode="cover"
            />
            {imageCount > 3 && (
              <View className="flex-1 h-24 rounded-lg bg-gray-200 items-center justify-center">
                <Text className="text-gray-600 font-medium">+{imageCount - 3}</Text>
              </View>
            )}
          </View>
        )}
      </View>
    );
  };

  return (
    <TouchableOpacity 
      className="bg-white mx-4 my-2 p-4 rounded-xl shadow-sm border border-gray-100"
      onPress={() => onPostPress?.(post.id)}
      activeOpacity={0.8}
    >
      {/* 用户信息区域 */}
      <TouchableOpacity 
        className="flex-row items-center mb-3"
        onPress={(e) => {
          e.stopPropagation();
          onUserPress(post.user.id);
        }}
      >
        <Image
          source={{ uri: post.user.avatar }}
          className="w-12 h-12 rounded-full mr-3"
        />
        <View className="flex-1">
          <Text className="text-gray-900 font-semibold text-base">
            {post.user.nickname || post.user.name}
          </Text>
          <Text className="text-gray-500 text-sm">
            {post.user.major} • {post.user.grade}
          </Text>
        </View>
        <Text className="text-gray-400 text-sm">{formatTime(post.createTime)}</Text>
      </TouchableOpacity>

      {/* 帖子标题 */}
      {post.title && (
        <Text className="text-gray-900 font-bold text-lg mb-1">
          {post.title}
        </Text>
      )}

      {/* 标签区域 */}
      {post.tags.length > 0 && renderTags()}

      {/* 帖子内容 */}
      <Text className="text-gray-800 text-base leading-6 mb-3">
        {post.content}
      </Text>

      {/* 图片区域 */}
      {renderImages()}

      {/* 互动区域 */}
      <View className="flex-row items-center justify-between pt-3 border-t border-gray-100">
        {/* 左侧互动按钮 */}
        <View className="flex-row items-center space-x-8">
          {/* 点赞按钮 */}
          <TouchableOpacity 
            className="flex-row items-center py-1 px-1"
            onPress={(e) => {
              e.stopPropagation();
              onLike(post.id);
            }}
          >
            <Ionicons 
              name={post.isLiked ? "heart" : "heart-outline"} 
              size={22} 
              color={post.isLiked ? "#EF4444" : "#6B7280"} 
            />
            <Text className={`ml-1 text-sm ${post.isLiked ? 'text-red-500' : 'text-gray-600'}`}>
              {post.stats.likes}
            </Text>
          </TouchableOpacity>

          {/* 评论按钮 */}
          <TouchableOpacity 
            className="flex-row items-center py-1 px-1"
            onPress={(e) => {
              e.stopPropagation();
              onComment(post.id);
            }}
          >
            <Ionicons name="chatbubble-outline" size={22} color="#6B7280" />
            <Text className="ml-1 text-sm text-gray-600">{post.stats.comments}</Text>
          </TouchableOpacity>
        </View>

        {/* 右侧功能按钮 */}
        <View className="flex-row items-center space-x-6">
          {/* 收藏按钮 */}
          <TouchableOpacity 
            className="flex-row items-center py-1 px-1"
            onPress={(e) => {
              e.stopPropagation();
              onFavorite(post.id);
            }}
          >
            <Ionicons 
              name={post.isFavorited ? "bookmark" : "bookmark-outline"} 
              size={22} 
              color={post.isFavorited ? "#3B82F6" : "#6B7280"} 
            />
            <Text className={`ml-1 text-sm ${post.isFavorited ? 'text-blue-500' : 'text-gray-600'}`}>
              {post.stats.favourites}
            </Text>
          </TouchableOpacity>

          {/* 分享按钮 */}
          <TouchableOpacity 
            className="py-1 px-1"
            onPress={(e) => {
              e.stopPropagation();
              onShare(post.id);
            }}
          >
            <Ionicons name="share-outline" size={22} color="#6B7280" />
          </TouchableOpacity>
        </View>
      </View>
    </TouchableOpacity>
  );
};

export default PostCard; 